<template>
  <van-checkbox-group
    v-model="checked"
    v-if="list"
    @change="ToggleGroup"
    ref="CheckboxGroup"
  >
    <div class="cart" v-for="(item, index) in list" :key="index">
      <!-- 复选框，name绑定购物车id -->
      <van-checkbox :name="item.id"> </van-checkbox>
      <!-- 滑动单元格 -->
      <van-swipe-cell>
        <!-- 商品卡片 -->
        <van-card
          :thumb="item.product.thumbs_text"
          @click-thumb="toProductInfo(item.proid)"
        >
          <!-- 卡片插槽部分 -->
          <template #title>
            <div class="title">{{ item.product.name }}</div>
          </template>
          <template #desc v-if="item.attrs && item.attrs.length> 0">
            <van-tag
              v-for="(value, key) in item.attrs"
              :key="key"
              class="tag"
              round
              plain
              type="primary"
              >{{ value.value }}</van-tag
            >
            <!-- 单价 -->
          </template>
          <template #tags>
            <div>单价：￥{{ item.price }}</div>
          </template>
          <template #price>
            <div>合计：￥{{ item.total }}</div>
          </template>

          <!-- 商品数量 步进器 -->
          <template #num>
            <van-stepper v-model="item.nums" @change="CartUpdate(item)" />
          </template>
        </van-card>

        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item)"
          />
        </template>
      </van-swipe-cell>
    </div>
  </van-checkbox-group>

  <div class="gwcbox" v-else>
    <div class="gwckbox">
      <div class="T1">
        <img src="/assets/images/kgwc.png" />
        <p>购物车还是空的</p>
      </div>
      <div class="T2">再忙也不能亏待自己啦，快去挑选好货吧~</div>
      <a href="list.html">逛一逛</a>
    </div>
  </div>
  <!-- 提交订单栏 -->
  <van-submit-bar class="submit" :price="total" button-text="提交订单" @submit="confirm">
    <van-checkbox
      v-model="CheckedAll"
      :indeterminate="isIndeterminate"
      @change="toggle"
      >全选</van-checkbox
    >
  </van-submit-bar>
  <div class="likebox">
    <div class="tit">•●●<span>猜你喜欢</span>●●•</div>
    <ul class="proul">
      <li>
        <a href="detail.html"><img src="/assets/images/7.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            北欧轻奢餐椅家用现代简约新中式洽谈酒店皮革软包餐厅椅子靠背椅
          </p></a
        >
        <div class="price">
          <p>￥2998<span>￥8999</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/4.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            松兰宾利实木餐桌椅组合后现代轻奢长方形大户型不锈钢8人饭桌
          </p></a
        >
        <div class="price">
          <p>￥998<span>￥1299</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/5.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            卫生间洗手台柜面池洗睑台式壁挂台盆架瓷盥洗池饭店小号挂盆经济
          </p></a
        >
        <div class="price">
          <p>￥368<span>￥659</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/6.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            布艺床主卧大床双人床港式轻奢ins网红床卧室北欧家具床现代简约
          </p></a
        >
        <div class="price">
          <p>￥3998<span>￥5999</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/7.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            北欧轻奢餐椅家用现代简约新中式洽谈酒店皮革软包餐厅椅子靠背椅
          </p></a
        >
        <div class="price">
          <p>￥398<span>￥898</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/4.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            松兰宾利实木餐桌椅组合后现代轻奢长方形大户型不锈钢8人饭桌
          </p></a
        >
        <div class="price">
          <p>￥898<span>￥1899</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/5.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            卫生间洗手台柜面池洗睑台式壁挂台盆架瓷盥洗池饭店小号挂盆经济
          </p></a
        >
        <div class="price">
          <p>￥998<span>￥1999</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/6.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            布艺床主卧大床双人床港式轻奢ins网红床卧室北欧家具床现代简约
          </p></a
        >
        <div class="price">
          <p>￥8998<span>￥18999</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/7.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            北欧轻奢餐椅家用现代简约新中式洽谈酒店皮革软包餐厅椅子靠背椅
          </p></a
        >
        <div class="price">
          <p>￥2998<span>￥8999</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/4.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            松兰宾利实木餐桌椅组合后现代轻奢长方形大户型不锈钢8人饭桌
          </p></a
        >
        <div class="price">
          <p>￥998<span>￥1299</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/5.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            卫生间洗手台柜面池洗睑台式壁挂台盆架瓷盥洗池饭店小号挂盆经济
          </p></a
        >
        <div class="price">
          <p>￥368<span>￥659</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/6.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            布艺床主卧大床双人床港式轻奢ins网红床卧室北欧家具床现代简约
          </p></a
        >
        <div class="price">
          <p>￥3998<span>￥5999</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/7.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            北欧轻奢餐椅家用现代简约新中式洽谈酒店皮革软包餐厅椅子靠背椅
          </p></a
        >
        <div class="price">
          <p>￥398<span>￥898</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/4.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            松兰宾利实木餐桌椅组合后现代轻奢长方形大户型不锈钢8人饭桌
          </p></a
        >
        <div class="price">
          <p>￥898<span>￥1899</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/5.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            卫生间洗手台柜面池洗睑台式壁挂台盆架瓷盥洗池饭店小号挂盆经济
          </p></a
        >
        <div class="price">
          <p>￥998<span>￥1999</span></p>
        </div>
      </li>
      <li>
        <a href="detail.html"><img src="/assets/images/6.jpg" /></a>
        <a href="detail.html"
          ><p class="tit">
            布艺床主卧大床双人床港式轻奢ins网红床卧室北欧家具床现代简约
          </p></a
        >
        <div class="price">
          <p>￥8998<span>￥18999</span></p>
        </div>
      </li>
    </ul>
  </div>
  <tabbar />
</template>
  <script setup>
  import tabbar from "@/components/common/tabbar.vue";
import { getCurrentInstance, onBeforeMount } from "vue";

const { proxy } = getCurrentInstance();

let list = ref([]);
let checked = ref([]); //默认选择的复选框
let CheckedAll = ref(false); //全选
let CheckboxGroup = ref(null);
let isIndeterminate = ref(true); //不确定状态

onBeforeMount(() => {
  CartInfo();
});

//购物车数据请求
const CartInfo = async () => {
  if(proxy.$business.value.id){
    var result = await proxy.$POST({
    url: "/cart/index",
    params: { busid: proxy.$business.value.id },
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return;
  }

  result.data.map((item) => (item.attrs = JSON.parse(item.attrs)));
  list.value = result.data;
  return false;
  }
 
};

//跳转到购物车详情界面
const toProductInfo = (proid) =>
  proxy.$router.push({ path: "/product/info", query: { proid } });

//全选按钮
const toggle = () => CheckboxGroup.value.toggleAll();

const ToggleGroup = (names) => {
  CheckedAll.value = checked.value.length == list.value.length;
  isIndeterminate.value =
    checked.value.length > 0 && checked.value.length < list.value.length;
};

//合计价格
let total = computed(() => {
  var total = 0;
  list.value.map((item) => {
    if (checked.value.includes(item.id)) total += parseFloat(item.total);
  });

  return parseInt(total * 100);
});

//更新购物车
const CartUpdate = async (item) => {
  //发送更新购物车请求
  var result = await proxy.$POST({
    url: "/cart/edit",
    params: { cartid: item.id, nums: item.nums },
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return;
  }
  CartInfo();
};

//删除购物车商品
const del = (item) => {
  proxy
    .$confirm({
      message: "是否确认删除商品" + item.product.name + "?",
    })
    .then(async () => {
      var res = await proxy.$POST({
        url: "/cart/del",
        params: { cartid: item.id },
      });
      if (res.code == 0) {
        proxy.$fail(res.msg);
        return;
      }
      CartInfo();
    })
    .catch(() => {});
};

//提交订单
const confirm = ()=>{
    if(checked.value.length <= 0){
        proxy.$fail('请选择购物车产品');
        return false
    }

    proxy.$router.push({path:'/cart/confirm',query:{cartids:checked.value.join(',')}})
}
</script>

<style scoped>
:deep(.cart) {
  display: flex;
  width: 100%;
}

/* width: 30px;
    text-align: center;
    align-items: center;
    justify-content: space-around; */

::v-deep .van-swipe-cell {
  width: 100%;
}
.delete-button {
  height: 100%;
}

.van-card {
  background-color: #fff;
}

.title {
  font-size: 15px;
  font-weight: bold;
}

.tag {
  margin-right: 5px;
}

.price {
  font-size: 14px;
  font-weight: bold;
}
.submit {
  margin-bottom: 50px;
}
</style>